<template>
	<view class="u-page">
		<view class="header"  :style="{backgroundImage:'url('+data.projectBgimg+')'}">
			<view class="nav-bar">
			<uni-nav-bar left-icon="back"  @clickLeft="goback()"  color="#ffffff" :border="border"  statusBar="true" backgroundColor="transparent">
				 <view slot="left" class="sitename">项目详情</view>
			</uni-nav-bar>
			</view>
			<view class="bg-gray">
				
			</view>
		</view>
		<view class="content">
			<view class="project">
				<view class="projecttitle">
					<view class="title ellipsis-sample">{{data.title}}</view>
					<view class="shareIcon">
						<view @click="collection()" v-if="iscollection == 0"><image src="../../static/icon/shouchang.png" mode="" ></image></view>
						<view v-else><image src="../../static/icon/shoucang2.png" mode="" ></image></view>
						<view><image src="../../static/icon/share.png" mode=""></image></view>
					</view>
				</view>
				<view class="projectinfo ellipsis-sample" >{{data.contentInfo}}</view>
				<view class="tags">
					<block v-for="(item,index) in data.tag" :key="index">
							<text class="tag" type="primary">{{item}}</text>
					</block>
				</view>
			</view>
			<view class="projectCol">
				<uni-grid :column="3" :showBorder="border"  @change="gridLink()">
					 <uni-grid-item :index="0">
						<view class="gridcol"><image src="../../static/icon/project.png" mode=""></image></view>
						<view class="grid-text">项目介绍</view>
					 </uni-grid-item>
					 <uni-grid-item :index="1">
						<view class="gridcol"><image src="../../static/icon/users.png" mode=""></image></view>
						<view class="grid-text">股东信息</view>
					 </uni-grid-item>
					 <uni-grid-item :index="2">
						<view class="gridcol"><image src="../../static/icon/project.png" mode=""></image></view>
						<view class="grid-text">工商信息</view>
					 </uni-grid-item>
				</uni-grid>
			</view>
			<view class="projectCell">
				<uni-list :border="border">
				     <uni-list-item @click="dynamic('/pages/project/dynamic/index?pid=',data.pid)" clickable="true" :border="border" title="项目动态圈" thumb="/static/icon/dt.png"
				      thumb-size="medium" showArrow="true"></uni-list-item>
					 
			
				</uni-list>
			</view>
			<view class="projectCell">
				<uni-list :border="border">
				     <uni-list-item @click="goPage(2)" clickable="true" :border="border" title="项目优势" thumb="/static/icon/youshi.png"
				      thumb-size="sm" showArrow="true"></uni-list-item>
					  <uni-list-item  :border="border" v-if="isVip != '1'"  clickable="true" title="项目资料" thumb="/static/icon/jingyin1.png"
					   thumb-size="sm" showArrow="true" @click="projectData()"></uni-list-item>
						<uni-list-item  :border="border" v-else  clickable="true" title="项目资料" thumb="/static/icon/jingyin1.png"
						 thumb-size="sm" showArrow="true" @click="projectFile()"></uni-list-item>
					   <uni-list-item @click="goPage(3)" clickable="true" :border="border" title="投资方案" thumb="/static/icon/touzi.png"
					    thumb-size="sm" showArrow="true"></uni-list-item>
				</uni-list>
			</view>
			<view class="projectContent">
				<!-- <rich-text :nodes="data.projectContent"></rich-text> -->
					<u-parse :content="data.projectContent" ></u-parse>
			</view>
			
			
		</view>
		<view class="footer">
			  <button type="warn" class="button" @click="investment(data.pid)" v-if="data.uuid != userData.uid">我要投资</button>
			  <button type="default" class="button"  v-else>您是项目发起人</button>
		</view>
		<view class="popupE">
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="info" mode="base" title="支付提示"  :content="earnestPrice" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
		    uParse
		  },
		data() {
			return {
				iscollection:'0',
				userData:{},
				pid:'',
				border:false,
				isVip:'0',
				data:{},
				orderid:'',
				earnestPrice:'',
			}
		},
		async onLoad(option) { 
			
			this.pid= option.id
			this.propert(option.id)
			let user = uni.getStorageSync('userData');
			if(uni.getStorageSync('userData')){
				this.userData = user
				this.records();
			}
			const project = await this.GQL({
				"operationName": "allSlProjects",
				"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title projectInfo type tag status pic pid earnestPrice contentInfo projectContent projectBgimg } } }",
				"variables": {"filter": {"pid": {"equalTo": this.pid}}}
			})
			console.log('pro',project)
			if(project.data.allSlProjects.nodes !=''){
				let pro = project.data.allSlProjects.nodes[0]
				//#ifdef MP-WEIXIN
				this.share.title = pro.title
				this.share.imageUrl = pro.pic
				this.share.path = "/pages/project/index?id="+option.id+'&uid='+this.userData.uid
						
				//#endif
			}
			// console.log('11111',this.data)
			
			console.log('share',this.project)
		},
		methods: {
			
			investment(pid){
				
				uni.navigateTo({
					url:"/pages/project/investment?pid="+pid
				})
			},
			projectFile(){
				uni.navigateTo({
					url:"/pages/project/investment/projectFolder?id="+this.pid
				})
			},
			goPage(type){
				uni.navigateTo({
					url:"/pages/project/projectInfo?id="+this.pid+'&type='+type
				})
			},
			dynamic(){
				uni.navigateTo({
					url:"/pages/project/dynamic/index?id="+this.pid
				})
			},
			goback(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 项目资料
			projectData(){
				this.earnestPrice =  "查看项目资料时需要支付诚意金"+this.data.earnestPrice+'元'
				// console.log('1------',this.data.earnestPrice)
				// console.log('2------',this.isVip)
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
		
			async confirm() {
				// console.log('1----',value)
				//创建诚意金订单
				let a = {
						"name":"查看项目资料，支付诚意金",
						"total":this.data.earnestPrice,
						"time":new Date().getTime()
					}
				
				let data = {
					uid:this.userData.uid,
					data:JSON.stringify(a),
					type:3,
					pid:this.pid,
					totalPrice:this.data.earnestPrice,
				};
				// console.log('1----',data)
				// console.log('1-----',data)
				//下单并调起支付
				const order = await this.GQL({
					"operationName": "createSlUserOrder",
					"query": "mutation createSlUserOrder($input: CreateSlUserOrderInput!) { createSlUserOrder(input: $input) { slUserOrder { uid orderId oid } } }",
					"variables": { "input": { "slUserOrder":data } }
				})
				// console.log('1------',order)
				if(order.data.createSlUserOrder.slUserOrder.oid !=''){
					this.orderid = order.data.createSlUserOrder.slUserOrder.oid
					console.log(this.orderid)
					//请求后台返回支付数据
					this.goWxpay();
				}else{
					uni.showToast({ title: '生成订单失败', icon: 'error', duration: 3000 });
				}
				this.$refs.popup.close()
			},
			async goWxpay(){
				let that = this
				uni.request({
					url:that.HttpServe+"/WeChat/earnestPrice",
					method:"POST",
					data:{
						oid:that.orderid
					},
					success(res) {
						console.log('res',res)
						// {"appId":"wxfb633c75dc609440","timeStamp":"\"1646732084\"","nonceStr":"eukym123v8fpdq4hgcn9wsj567laztb0","package":"prepay_id=wx081734437616652c726732b5066ca90000","signType":"MD5","paySign":"238CE9CDFA1926A0F0880505F5981649"} 1994年10月20日
						if(res.data.code == 200){
							// console.log('10----',res.data.data)
							let parameters = JSON.parse(res.data.data.parameters)
							// console.log('1-----',parameters)
							uni.requestPayment({
							    provider: 'wxpay',
								timeStamp: parameters.timeStamp,
								nonceStr: parameters.nonceStr,
								package: parameters.package,
								signType: 'MD5',
								paySign: parameters.paySign,
								success: function (res) {
									uni.navigateTo({
										url:"/pages/project/investment/projectFolder?id="+that.pid
									})
									console.log('success:' + JSON.stringify(res));
								},
								fail: function (err) {
									uni.showToast({ title: '支付失败！', icon: 'error', duration: 3000 });
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}else{
							uni.showToast({ title: '调起支付失败', icon: 'error', duration: 3000 });
							
						}
						
					}
				})
			},
			//收藏
			async collection(){
				const collection = await this.GQL({
					"operationName": "createSlUserRecord",
					"query": "mutation createSlUserRecord($input: CreateSlUserRecordInput!) { createSlUserRecord(input: $input) { slUserRecord { id createTime } } }",
					"variables": {"input": {"slUserRecord":{"uid":this.userData.uid,"pid":this.pid,"type":'1'}}}
				})	
				this.iscollection = "1"
				this.propert(this.pid)
			},
			//浏览记录
			async records(){
				const records1 = await this.GQL({
					"operationName": "allSlUserRecords",
					"query": "query allSlUserRecords($filter: SlUserRecordFilter) { allSlUserRecords(filter:$filter) { nodes { id pid uid } } }",
					"variables": {"filter": {"pid": {"equalTo": this.pid},"uid":{"equalTo":this.userData.uid},"type":{"equalTo":"0"}}}
				})
			
				if(records1.data.allSlUserRecords.nodes =='' ){
					const records = await this.GQL({
						"operationName": "createSlUserRecord",
						"query": "mutation createSlUserRecord($input: CreateSlUserRecordInput!) { createSlUserRecord(input: $input) { slUserRecord { id createTime } } }",
						"variables": {"input": {"slUserRecord":{"uid":this.userData.uid,"pid":this.pid,"type":'0'}}}
					})	
				}
				const collection = await this.GQL({
					"operationName": "allSlUserRecords",
					"query": "query allSlUserRecords($filter: SlUserRecordFilter) { allSlUserRecords(filter:$filter) { nodes { id pid uid } } }",
					"variables": {"filter": {"pid": {"equalTo": this.pid},"uid":{"equalTo":this.userData.uid},"type":{"equalTo":"1"}}}
				})
				if(collection.data.allSlUserRecords.nodes !=''){
					this.iscollection = true;
				}
			},
			//获取项目数据
			async propert(pid){
				const project = await this.GQL({
					"operationName": "allSlProjects",
					"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title projectInfo type tag status pic pid earnestPrice contentInfo projectBgimg projectContent uuid} } }",
					"variables": {"filter": {"pid": {"equalTo": pid}}}
				})
				const investment = await this.GQL({
						"operationName": "allSlUserProjectvips",
						"query": "query allSlUserProjectvips($filter: SlUserProjectvipFilter) { allSlUserProjectvips(filter: $filter) { nodes { vid uid level pid slProjectByPid { tag title status projectInfo contentInfo investRights pic pid familyRights } } } }",
						"variables": {"filter": {"uid":{"equalTo":this.userData.uid},"pid":{'equalTo':pid}}}
				})
				if(investment.data.allSlUserProjectvips.nodes != ''){
					this.isVip = '1';
				}
				
				
				const userLevel =  await this.GQL({
					"operationName": "allSlUserOrders",
					"query": "query allSlUserOrders($filter: SlUserOrderFilter) { allSlUserOrders(filter:$filter) { nodes { data oid pid status uid type totalPrice orderId } } }",
					"variables": {"filter": {"pid": {"equalTo": pid},"uid": {"equalTo": this.userData.uid},"type": {"equalTo": 3},"status": {"equalTo": "1"}}}
				})
				
				if(project.data.allSlProjects.nodes !=''){
					project.data.allSlProjects.nodes[0].tag = project.data.allSlProjects.nodes[0].tag.split(',')
					this.data = project.data.allSlProjects.nodes[0]
					if(project.data.allSlProjects.nodes[0].earnestPrice != 0){
						if(userLevel.data.allSlUserOrders.nodes != ''){
							this.isVip = '1';
						}
					}else{
						this.isVip = '1';
					}
					
					
					
				}
			},
			gridLink(id){
				if(id.detail.index == 2){
					uni.navigateTo({
						url:"/pages/project/info/projectBusiness?id="+this.pid+'&title='+this.data.title
					})
				}else if(id.detail.index == 1){
					uni.navigateTo({
						url:"/pages/project/info/shareholder?id="+this.pid+'&title='+this.data.title
					})
				}else{
					uni.navigateTo({
						url:"/pages/project/projectInfo?id="+this.pid+'&type=1'
					})
				}
				// uni.navigateTo({
				// 	url:"/pages/project/projectInfo"
				// })
				console.log('111',id)
			}
		}
	}
</script>

<style lang="scss">
	
	.u-page{
		background-color: #FBFCFE;
	}
	 .header{
	 	width: 100%;
	 	height: 260px;
		position: relative;
	 	/* color: #FFFFFF; */
		// background-image: url('https://cdn.uviewui.com/uview/album/3.jpg');
		.bg-gray{
			position: absolute;
			z-index: 0;
			top: 0;
			width: 100%;
			height: 260px;
			background: linear-gradient(rgba(19, 20, 21, 1), rgba(19, 20, 21, 0.08)); /* 标准的语法 */
		}
	 	.nav-bar{
			position: absolute;
			z-index: 1;
	 		.uni-navbar__header{
	 			padding-left:15px ;
	 		}
	 		.uni-navbar__header-btns-left{
	 			width: 150px;
	 		}
	 		.sitename{
	 			height: 50px;
	 			font-size: 18px;
	 			font-family: PingFangSC-Medium, PingFang SC;
	 			font-weight: 550;
	 			text-align: left;
	 			color: #FFFFFF;
	 		}
	 	}
	 }
	 .content{
			position: relative;
			top: -180px;
			margin: 15px;
	 }
	 .project{
		 .projecttitle{
			 color: #FFFFFF;
			 font-weight: 600;
			 line-height: 60rpx;
			 height: 60rpx;
			 // height: 28px;
			 .title{
			 	font-size: 36rpx;
			 	width: 540rpx;
				height: 56rpx;
				overflow: hidden;
			  }
			  .shareIcon{
				  top: -25px;
				  position: relative;
				  display: flex;
				  justify-content: flex-end;
				 
				  image{
					  width: 20px;
					  height: 20px;
					  margin-left: 15px;
				  }
			  }
			 
			
		 }
		 // .popupE{
			//  background-color: #FFFFFF;
		 // }
		
		.projectinfo{
			line-height: 30rpx;
			margin: 20rpx 0px;
			font-size: 11px;
			color: #ffffff;
			font-weight: 400;
			width: 100%;
			height: 34rpx;
			overflow: hidden;
		}
		// .tags{
		// 	width: 100%;
		// 	margin-top: 10px; 
		// 	.tag{
		// 		margin-right: 5px;
		// 	}
		// }
		.tags{
			position: relative;
			height: 46rpx;
			line-height: 46rpx;
			.tag{
				height: 38rpx;
				line-height: 38rpx;
				padding: 4rpx 10rpx;
				border-radius: 20rpx;
				border: 2rpx solid;
				font-size: 22rpx!important;
				margin-left: 10rpx!important;
				box-sizing: border-box;
				vertical-align: middle; 
				&:first-child{
					margin-left: 0px!important ;
					background-color: #FFE1E2!important;
					border-color: #FFB4B7!important;
					color: #C7171E!important;
				}
				&:nth-child(2n){
					background-color: #FFEBCD!important;
					border-color: #FFD598!important;
					color: #EC8C00!important;
				}
				&:nth-child(3n){
					background-color: #DCFFE3!important;
					border-color: #B1F7BF!important;
					color: #02B327!important;
				}
				&:nth-child(4n){
					background-color: #EFE4FF!important;
					border-color: #A88AD5!important;
					color: #4500AC!important;
				}
			}
			image{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 0rpx;
			}
		}
	 }
	 .projectCol{
		 margin-top: 30px;
		 border-radius:10px;
		 background-color: #FFFFFF;
		 height: 120px;
		 text-align: center;
		 display: block;
		 justify-content: center;
		 box-shadow: 0 0rpx 50rpx 2rpx rgba(55,58,64,0.14);
		 height: 216rpx;
		 padding: 12rpx 24rpx;
		 .gridcol{
			margin-top: 5px;
		 }
		 .grid-text{
			 padding-bottom: 10px;
			 color: #767B8D;
			 font-size: 30rpx;
			 position: relative;
			 top: -10rpx;
		 }
		 image{
			 width: 72px;
			 height: 72px;
		 }
	 }
		
	.projectCell{
		margin-top: 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		box-shadow: 0 0rpx 50rpx 2rpx rgba(55,58,64,0.14);
		.uni-list{
			background-color: transparent;
		}
		.uni-list-item{
			height: 104rpx;
			background-color: transparent;
		}
	}
	.projectContent{
		margin-top: 10px;
		color: #767B8D;
	}
	.footer{
		background-color: #FFFFFF;
		height: 60px;
		width: 100%;
		.button{
			margin: 15px;
		}
	}
	
	
	 
</style>
